<template>
<div class="become-agent">
  <el-divider content-position="center">
    <h1 class="become-agent-title">加入我们!</h1>
  </el-divider>
  <div class="become-agent-header">
    <el-steps :active="step" finish-status="success" simple >
      <el-step title="基本信息填写" ></el-step>
      <el-step title="上传营业执照" ></el-step>
      <el-step title="等待审核" ></el-step>
    </el-steps>
  </div>
  <div class="become-agent-content-1" v-if="step === 1">
    <el-form ref="form" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="售卖区域:">
        <el-cascader :options="regionAll" v-model="form.region" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model="form.idCard"></el-input>
      </el-form-item>
      <el-form-item label="成为总代理:">
        <el-tooltip class="item" effect="dark" content="您可以成为您所在地区的总代理" placement="top-start">
          <el-switch v-model="form.delivery"></el-switch>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="become-agent-content-2" v-if="step === 2">
    <el-form ref="form" :model="form" label-width="90px">
      <el-form-item label="营业执照:">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/index/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAgency">确认上传</el-button>
        <el-button type="danger" @click="upStep">上一步</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="become-agent-content-3" v-if="step === 3">
    <el-result icon="warning" title="提交成功" subTitle="我们将在2-7个工作日内对您的信息进行审核">
      <template slot="extra">
        <el-button type="primary" size="medium" @click="goBack">返回</el-button>
      </template>
    </el-result>
  </div>
</div>
</template>

<script>
export default {
  name: "BecomeAgent",
  data(){
    return{
      step:1,
      form: {
        name: '',
        idCard:'',
        region: [],
        delivery: false,
        resource: '',
        desc: '',
        img:'',
        phone:''
      },
      imageUrl: '',
      regionAll:[],
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入正确的手机号', trigger: 'blur',pattern: /^1[3456789]\d{9}$/ }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min:10,max:11, message: '请输入正确的长度', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods:{
    onSubmit() {
      this.step = this.step + 1
    },
    upStep(){
      this.step = this.step - 1
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 100;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 100MB!');
      }
      return isJPG && isLt2M;
    },
    goBack(){
      location.href = "/"
    },
    addAgency(){
      this.step = this.step + 1
      axios({
        url:'http://localhost:8081/index/addAgency',
        method:'post',
        data:{
          name: this.form.name,
          idCard: this.form.idCard,
          region: this.form.region,
          delivery: this.form.delivery,
          resource: this.form.resource,
          desc: this.form.desc,
          img: this.form.img,
          phone: this.form.phone
        }
      }).then(res=>{
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  watch:{
    'form.delivery'(newV,oldV){
      if (newV === true){
        axios({
          method:'post',
          url:`http://localhost:8081/index/check/${newV}`,
          data:{
            region: this.form.region
          }
        }).then(res => {
          if (res.data.code === 500){
            this.$message.error(res.data.msg);
            this.form.delivery = !this.form.delivery
          }else{
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/region/getRegion'
    }).then(res=>{
      if (res.data.code === 500){
        console.log("没有数据!")
        return
      }
      this.regionAll = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>
.become-agent-title{
  font-family: "Microsoft YaHei UI Light";
  color: #ef475d;
}
.become-agent{
  width: 100%;
  height: 100%;
}
.become-agent-header,.become-agent-content-1,.become-agent-content-2{
  width: 70%;
  height: 20%;
  margin: 0 auto;
}
.become-agent-content-1,.become-agent-content-2{
  margin-top: 30px;
  text-align: left;
}
.avatar-uploader .el-upload {
  border: 1px solid #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #000000;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #000;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
